<template>
  <div>
   <h1>{{count}}</h1>
   <button @click="count++">累加</button>
   <button @click="destroy">卸载组件</button>
  </div>
</template>

<script>
export default {
name:'App',
data(){
  return{
   count:1,
  }
},
/* 
    beforeUpdate触发条件：数据已经修改,视图还没有更新
      此时得到的数据和视图展示的数据是不一致的
  */
 beforeUpdate() {
  console.log(this.count);
  debugger;
 },
 /* 
    在updated执行之前,vue已经根据新的数据重新渲染得到了一个新的虚拟DOM,然后根据diff算法,修改了真实DOM(视图展示)
    此时数据和视图已经保持一致了
  */
 updated() {
  console.log(this.count);
  debugger
 },
 /* 
    当组件收到销毁的指令时,会调用beforeDestroy钩子函数
    在当前的生命周期函数中,所有的功能都是正常的!!!!
    但是最好不要再修改数据了!!!!
    在这个生命周期函数中一般来处理收尾的工作(关闭定时器,取消订阅,解绑自定义事件等等)
  */
 beforeDestroy() {
  console.log(this);
  this.count=10;
  debugger
 },


 /* 
    在destroyed之前,vue取消了观察(数据双向绑定),并且把子组件内部的事件等等都拆卸掉了
    注意:在destroyed中还是可以访问vm的,只不过是切断了vm和视图之前的联系
  */
 destroyed() {
  console.log(this);
 },
 methods: {
  destroy(){
    this.$destroy();
  }
 },
}
</script>

<style>

</style>